<template>
  <el-form
    ref="formData"
    :model="formData"
    label-width="50px"
    style="width: 100%"
  >
    <el-form-item label="名称">
      <el-input v-model="formData.goodName"/>
    </el-form-item>

    <el-form-item label="图片">
      <el-upload :before-upload="beforeupload"
                 :limit="1"
                 :on-preview="handlePictureCardPreview"
                 :on-remove="handleRemove"
                 :on-success="onSucess"
                 accept=".jpg,.jpeg,.png"
                 action="http://localhost:8080/good/upload"
                 list-type="picture-card"
      >
        <i class="el-icon-plus"></i>
      </el-upload>
      <el-dialog :visible.sync="dialogVisible">
        <img :src="dialogImageUrl" alt="" width="100%"/>
      </el-dialog>
    </el-form-item>

    <el-form-item label="介绍">
      <el-input
        v-model="formData.context"
        :autosize="{minRows:4,maxRows:8}"
        placeholder="请输入介绍"
        size="500"
        type="textarea"
      />
    </el-form-item>

    <el-form-item label="类型">
      <el-select
        v-model="formData.typeId"
        placeholder="请选择类型"
        style="width: 100%"
      >
        <el-option
          v-for="item in typeList"
          :key="item.typeId"
          :label="item.typeName"
          :value="item.typeId"
        />
      </el-select>
    </el-form-item>

    <el-form-item label="库存">
      <el-input v-model="formData.soldNum"/>
    </el-form-item>

    <el-form-item label="价格">
      <el-input v-model="formData.price"/>
    </el-form-item>

    <el-form-item label="状态">
      <el-select
        v-model="formData.status"
        placeholder="请选择状态"
        style="width: 100%"
      >
        <el-option
          v-for="item in statusOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="onSubmit(formData)">提交</el-button>
      <el-button @click="onClose()">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  name: 'GoodSpuForm',
  props: {
    formData: {
      type: Object,
      default() {
        return {
          goodName: '',
          context: '',
          typeId: '',
          soldNum: '',
          status: '',
          price: '',
          url: ''
        }
      }
    },
    typeList: {
      type: Array,
      default() {
        return []
      }
    },
    onSubmit: {
      type: Function,
      default() {
      }
    },
    statusOptions: {
      type: Array,
      default() {
        return [{
          value: 1,
          label: '上架'
        }, {
          value: 0,
          label: '下架'
        }, {
          value: -1,
          label: '删除'
        }]
      }
    },
    statusValue: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      status_value: this.formData.status,

      dialogImageUrl: '',
      dialogVisible: false
    }
  },
  mounted() {
    this.status_value = this.formData.status
    /*
  getOptions('book').then(res => {
    this.options = res.data
  })
  */
  },
  methods: {
    onClose() {
      this.$router.go(-1)
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      // console.log(file + "777");
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    beforeupload(file, fileList) {
      let types = ["image/jpeg", "image/jpg", "image/png"];

      const isImage = types.includes(file.type);

      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isImage) {
        this.$message.error("上传图片格式错误，格式只能为 png,jpg,jpeg!!");
        return false;
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
        return false;
      }
      return true;
    },
    onSucess(response, file, fileList) {
      // console.log(response.dialogImageUrl);
      this.formData.url = response.dialogImageUrl;
      this.$message({
        type: 'info',
        message: '上传成功！'
      })
    }
  }
}
</script>
